# Submission

<EpicVideo url="https://www.epicreact.dev/workshops/react-fundamentals/submission" />

🐨 For this exercise, I want you to read through these instructions and complete
things step by step as you read the instructions so you can observe the changes
as they come. There aren't a lot of steps, but it's important you understand
each one.

<callout-info>
	I recommend opening [the playground](/app/playground) in a new tab so you can
	open the [network tab](https://developer.chrome.com/docs/devtools/network).
</callout-info>

👨‍💼 Right now, when we submit the form, we get a full page refresh and what we
entered ends up in the URL. This is the default behavior of forms. This works
well for a search page, but it's certainly not optimal for a form like this one
for two reasons:

1. We don't want to see the data in the URL (like the password) as that can
   appear in logs, be saved in the browser history, and is visible to anyone
   looking over our shoulder.
2. We generally don't want a full-page refresh as that can be jarring to the
   user and forces the browser to re-evaluate all our client-side JavaScript.

To handle the first problem, let's switch to using `POST` instead of the default
form HTTP `method` (which is `GET`). This will send the data in the body of the
request instead of in the URL:

```tsx
<form action="api/onboarding" method="POST"></form>
```

🐨 Go ahead and make that change now, then come on back for the rest...

Now, when you submit the form, you'll notice we get an error because
our <InlineFile file="api.server.ts" /> file does not handle the `POST` request
yet.

To fix this, go to <InlineFile file="api.server.ts" /> and follow the
instructions in there to handle non-`GET` requests. You'll notice we need to
switch from using search params to using `request.formData()` to get the form
submission. This is because the body of the request is not a query string, but
rather an `application/x-www-form-urlencoded` request.

🐨 Ok, now I want you to submit the form again. Make sure you include a photo.

You should notice that it shows the photo's filename rather than showing the
file you uploaded. Why is this?

I want you to check the network tab in your dev tools and see what the request
looks like because we have a third problem. You'll notice that the
`Content-Type` header is `application/x-www-form-urlencoded` and the body of the
request is a query string. This is the default behavior of forms and it's a fine
default for simple forms.

The problem for us is we're trying to upload a file which cannot be reasonably
represented by a string in the URL (especially for large files). The file is
simply represented by its name, and that is all the server will get which is
just not very useful to the server.

We can change that by adding a `encType="multipart/form-data"` attribute to the
form. This will change the `Content-Type` header to `multipart/form-data` and
the body of the request will be a `multipart/form-data` request. This is the
same type of request that you'd get if you were uploading a file which is what
we're doing with the photo.

🐨 Now, update the `form` to have the appropriate [`enctype`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype) attribute for file
uploads:

```tsx
<form
	action="api/onboarding"
	method="POST"
	encType="multipart/form-data"
></form>
```

Great, so now if you check the network tab you'll find that the file is
actually uploaded properly.

Now let's get to the full page refresh issue. The only way to solve this is by
handling the form submission through JavaScript and preventing the built-in
browser behavior. In a real application, you would want to make sure your server
can handle those form submissions (for
[progressive enhancement](https://www.youtube.com/watch?v=EzLGleT1yrY&list=PLV5CVI1eNcJgNqzNwcs4UKrlJdhfDjshf)
reasons). But you'll also want to still prevent default to avoid the full-page
refresh.

This is where the [Remix](https://remix.run) web framework comes in to handle
all that for you. But in this React-focused workshop, we're not going to cover
that in detail.

So instead of continuing with our <InlineFile file="api.server.ts" /> file,
we're going to add an `onSubmit` handler to the form to handle the form
submission in JavaScript and prevent the browser's default behavior.

```tsx
<form
	action="api/onboarding"
	method="POST"
	encType="multipart/form-data"
	onSubmit={(event) => {
		event.preventDefault()
		// ...
	}}
></form>
```

🐨 Go ahead and make that change now, then come on back for the rest...

Now you shouldn't be getting a full-page refresh (and you'll also not be getting
the form submission either). So now, we just need to get the form data and log
that out. To do that, we'll use
[the `FormData` API](https://developer.mozilla.org/en-US/docs/Web/API/FormData):

```tsx
const form = event.currentTarget
const formData = new FormData(form)
// The browser doesn't display form values very well when you console.log(formData)
// so you can do this:
console.log(Object.fromEntries(formData))
// this will create an object out of the properties in the formData so you can
// more easily see what's in there. Keep in mind that formData can have multiple
// values for a single key, so you don't generally want to rely on this method
// for production code.
```

You can get the form from the submit event via
[`event.currentTarget`](https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget).

🐨 Go ahead and make that change now, then come on back for the rest...

Now, when you submit the form, you should see the form data logged out to the
console. You can also check the network tab to see that the form submission is
not happening so we're not getting an error and there is no refresh.

Great work!
